<template>
<div :class="{ active: isActive }">666</div>
<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
>88</div>
<!-- // 我们可以给 :class 绑定一个数组来渲染多个 CSS class： -->
<div class="[isActive,hasError]">
    11
</div>
<div :class="[isActive ? activeClass : '', errorClass]"></div>
</template>

<script setup>
import { ref } from 'vue'
// 我们可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class：
const isActive = ref(true)
const hasError = ref(true)



</script>

<style  scoped>
.text-danger {
  color: #dc3545; /* 红色 */
}

</style>